<template>
  <template v-if="!isLoading">
    <a-style-provider hash-priority="high">
      <a-layout>
        <a-layout-header class="w-full z-100 fixed flex z-[999]">
          <div class="flex-1">
            <a-space>
              <a-button type="link" @click="back">
                <template #icon>
                  <Icon icon="LeftOutlined"></Icon>
                </template>
                返回
              </a-button>
              <a-space size="small">
                <template v-if="showTitle">
                  <h1 class="text-[18px]">{{ questionData.title }}</h1>
                </template>
                <template v-else>
                  <a-input :maxlength="15" v-model:value="questionData.title" placeholder="Basic usage" @blur="blur"/>
                </template>
                <a-button type="text" @click="showTitle=false" v-if="showTitle">
                  <template #icon>
                    <Icon icon="EditOutlined"></Icon>
                  </template>
                </a-button>
              </a-space>
            </a-space>
          </div>
          <div class="flex-1 text-center">
            <HeaderButton></HeaderButton>
          </div>
          <div class="flex-1 justify-end flex">
            <a-space>
              <a-button>
                保存
              </a-button>
              <a-button type="primary" @click="Distribution">
                发布
              </a-button>
            </a-space>
          </div>
        </a-layout-header>
        <a-layout-content :style="contentStyle" class="pt-[70px] h-[100vh] overflow-hidden">
          <div class="px-[24px] flex justify-between h-full">
            <div class="w-[296px] bg-[#fff] px-[12px] overflow-auto h-full">
              <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane key="1">
                  <template #tab>
                    <span>
                       <Icon icon="AppstoreOutlined"></Icon>
                      组件库
                    </span>
                  </template>
                  <h3 class="text-left mb-2 text-[16px]">文本显示</h3>
                  <QuestionParagraph></QuestionParagraph>
                  <h3 class="text-left mb-2 mt-2 text-[16px]">用户输入</h3>
                  <QuestionInput></QuestionInput>
                  <h3 class="text-left mb-2 mt-2 text-[16px]">用户选择</h3>
                  <QuestionCheckbox></QuestionCheckbox>
                </a-tab-pane>
                <a-tab-pane key="2">
                  <template #tab>
                    <span>
                       <Icon icon="UnorderedListOutlined"></Icon>
                      图层
                    </span>
                  </template>
                  <div class="w-full pb-[10px]">
                    <CanvasItem></CanvasItem>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </div>
            <div class="flex-1 flex items-center justify-center  bg-[#f0f2f5] overflow-auto h-full"
                 @click.stop="showRight">
              <div class="w-[400px] pt-[10px] bg-[#fff] h-full item-events-none" ref="container">
                <EditCanvas></EditCanvas>
              </div>
            </div>
            <div class="w-[300px] bg-[#fff] px-[12px] overflow-auto h-full">
              <RightPanel></RightPanel>
            </div>
          </div>
        </a-layout-content>
      </a-layout>
    </a-style-provider>
  </template>
  <template v-else>
    <div class="w-full h-[100vh] flex items-center justify-center">
      <a-spin/>
    </div>
  </template>
</template>

<script setup>
import CanvasItem from "../../components/CanvasItem.vue";
import HeaderButton from "../../components/HeaderButton.vue";
import {Icon} from "../../utils/Icon.js";
import {ref, onMounted, onBeforeUnmount} from 'vue';
import {useRoute, useRouter} from "vue-router";
import QuestionParagraph from '../../components/QuestionComponents/QuestionParagraph/index.vue'
import QuestionInput from '../../components/QuestionComponents/QuestionInput/index.vue'
import QuestionCheckbox from '../../components/QuestionComponents/QuestionCheckbox/index.vue'
import EditCanvas from '../../components/EditCanvas/index.vue'
import RightPanel from '../../components/RightPanel/index.vue'
import {getMyQuestionDetail, getQuestionDetail} from '../../http/api.js'
const $router = useRouter()
const $route = useRoute()
import useQuestion from "../../store/question.js";
import {storeToRefs} from "pinia";
const questionStore = useQuestion()
let showTitle = ref(true)
let container = ref(null)
const {questionData, componentList} = storeToRefs(questionStore)
let isLoading = ref(false)
const blur = () => {
  showTitle.value = true
}
const back = () => {
  $router.back()
}
const Distribution = () => {
  console.log(componentList.value)
}
const handleEvent = async (event) => {
  switch (event.keyCode) {
    case 67:
      questionStore.copyItem()
      break
    case 83:
      console.log('ctrl + s')
      event.preventDefault()
      event.returnValue = false // 阻止直接保存网页
      if (event.ctrlKey && event.code === 'KeyS') {
        // 在这里写保存需要执行的逻辑
      }
      if (event.ctrlKey && event.code === 'KeyS') return false
      break
    case 86:
      questionStore.pasteItem()
      break
    case 90:
      if (event.ctrlKey && event.code === 'KeyZ') {
        questionStore.revoke()
      }
      break
  }
}
const getData = async () => {
  const {id} = $route.params
  const {my} = $route.query
  let result
  if (my) {
    result = await getMyQuestionDetail(id)
  } else {
    result = await getQuestionDetail(id)
  }
  questionData.value = result
  questionStore.componentList = result.componentList
  questionStore.activeId = result.componentList[0].fe_id
}
onBeforeUnmount(() => {
  window.removeEventListener('keydown', handleEvent);
})
onMounted(async () => {
  window.addEventListener('keydown', handleEvent);
  isLoading.value = true
  questionStore.changeLoading(true)
  await getData()
  isLoading.value = false
  questionStore.changeLoading(false)
})
const showRight = (event) => {
  if (!container.value.contains(event.target)) {
    questionStore.changeEditKey('2')
  }
}

const activeKey = ref('1');
const contentStyle = {
  textAlign: 'center',
  color: '#fff',
  backgroundColor: '#f0f2f5',
};
</script>

<style scoped lang="scss">
:deep(.ant-layout-header ) {
  height: 56px !important;
  background: #fff !important;
  line-height: 56px !important;
  padding: 0 24px;
  padding-inline: 24px !important;
}

:deep(.ant-tabs-nav-wrap .anticon) {
  margin-right: 5px !important;
}

.item-events-none {
  :deep(.checkbox ) {
    pointer-events: none;
  }

  :deep(.radio ) {
    pointer-events: none;
  }
}
</style>

